<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 400px;
            /* background-color: red;
            background-image: url("./images/bg1.png");
            background-repeat: no-repeat; */
            /* background-position: 50px 50px; */
            /* background-position: 50% 50%; */
            /* background-position: center top; */

            /* 有多张图片的时候，需要用逗号隔开 */
            /* 背景颜色需要加在最后一张图上面 */
            background: url("./images/bg1.png") no-repeat center top, red url("./images/bg2.png") no-repeat 100% 100%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!-- 
    背景属性
        background 是一个复合属性(多个属性的简写)

        background-color: 背景颜色
            和文字颜色的写法一样
        background-image: 背景图片
            url("xxxx")
        background-repeat: 背景图平铺属性
            repeat 平铺(默认值)
            no-repeat 不平铺
            repeat-x 水平方向平铺
            repeat-y 垂直方向平铺
        background-position: 背景图位置
            水平位置 垂直位置
            可以写value + 单位
            可以写百分比
            可以写关键字比如  left/center/right  top/center/bottom
 -->